<!--收藏夹列表-->
<script setup>

import {ElementUtils} from "@/assets/js/ElementUtils";
import {setupMapGetters, setupMapState} from "@/assets/js/vuexUtils";
import FavorFolderItem from "@/components/thread/FavorFolderItem.vue";
import {routeNames} from "@/router";
import {FavorFolderType} from "@ginstone/nga-api/dist/src/enums/FavorFolderType";
import {NukeApi} from "@ginstone/nga-api/dist/src/method/NukeApi";
import {FavorFolderModifyParam} from "@ginstone/nga-api/dist/src/params/NukeParams";
import {nextTick, onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const {currentUid} = setupMapState("Account", ["currentUid"])

const getClient = setupMapGetters("Account", ["getClient"]).getClient.value
const route = useRoute()
const router = useRouter()
const store = useStore();

const userId = ref()
const folders = ref()
// 重定向
const redirect = () => {
  const arr = folders.value;
  if (route.params.id === '1' && arr.length > 0) {
    const defaultFolder = arr.filter(i => i.type === FavorFolderType.DEFAULT)[0]
    if (defaultFolder) {
      router.push({params: {id: defaultFolder.id}})
    } else {
      router.push({params: {id: arr[0].id}})
    }
  }
}
const request = (route) => {
  const loading = ElementUtils.loading({target: "#favor-folders",});
  userId.value = route.query.userId || currentUid.value
  store.dispatch("Favor/favorFolderList", {force: false}).then(res => {
    folders.value = res
    // 重定向到指定收藏夹
    redirect()
  }).finally(() => {
    loading.close();
  })
}
const showTips = ref(false);
// input框id
const inputId = "folder-name-input"
// 对话框显示
const dialogVisible = ref(false);
// 修改表单
const form = ref();
// 打开对话框
const openDialog = (item) => {
  showTips.value = item.type === FavorFolderType.DEFAULT
  const isPublic = item.type === FavorFolderType.PUBLIC
  const name = item.name
  const folderId = item.id;
  form.value = {isPublic, name, folderId}
  dialogVisible.value = true

  // 自动选中
  nextTick(() => {
    setTimeout(() => {
      const e = document.getElementById(inputId)
      e.focus()
      e.select()
    }, 100)
  })
}

const modify = () => {
  const {isPublic, name, folderId} = form.value
  NukeApi.favorFolderModify(getClient(), new FavorFolderModifyParam(name, isPublic, folderId)).then(res => {
    ElementUtils.notice({message: res})
    dialogVisible.value = false;
    request(route);
  })
}


onMounted(() => {
  request(route);
})

watch(route, (nv, ov) => {
  if (nv.name === routeNames.thread.favor) {
    // 用户名不同时重新请求 ，否则直接重定向
    if (nv.query.userId !== userId.value) {
      request(nv)
    } else {
      redirect()
    }
  }
})

</script>

<template>
  <div id="favor-folders" style="min-height: 30px">
    <template v-for="item in folders">
      <favor-folder-item :data="item"/>
      <el-button size="small" type="info" @click="openDialog(item)">修改</el-button>
    </template>
    <el-dialog v-model="dialogVisible" append-to-body title="修改收藏夹" width="300px">
      <el-form>
        <el-form-item label="名称">
          <el-input :id="inputId" v-model="form.name"/>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="form.isPublic" active-text="公开" inactive-text="私有"/>
        </el-form-item>
        <span v-if="showTips" style="color:red">TIPS:默认收藏夹被修改之后,系统将创建一个新的默认收藏夹</span>
      </el-form>
      <template #footer>
        <el-button type="success" @click="modify">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>